<template>
	<view class="yxyl-swiper-container" v-if="swiperItems.length>0">
		<swiper  :indicator-dots="true" :autoplay="autoplay" :interval="interval" :duration="duration"
		indicator-active-color="#F44336">
			<swiper-item v-for="(item,index) in swiperItems" :key="index">
				<view class="swiper-item" @tap='routeHandler(item.targetInfo)'>
					<image class="swiper-item-image" :src="item.bannerSrc" mode="widthFix"></image>
				</view>
			</swiper-item>		
		</swiper>
	</view>
</template>

<script>
	import routeUtil from '@/util/routeUtil.js'
	export default{
		props:{
			swiperItems:{
				type:Array,
				default () {
					return []
				}
			},
			autoplay:{
				type:Boolean,
				default:true
			},
			interval:{
				type:Number,
				default:3000
			},
			duration:{
				type:Number,
				default:1000
			}
		},
		methods:{
			routeHandler(target){
				routeUtil.routeHandler(target);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.yxyl-swiper-container{
		width: 100%;
		.swiper-item{
			width: 100%;
			.swiper-item-image{
				width: 100%;
			}
		}
	}
</style>
